<template>
  <div>
    <ToolBar :multi-selection="multiSelection">
      <div slot="select">
        <el-button type="danger" size="small" @click="batchDelete">批量删除</el-button>
      </div>
      <div slot="unselect" class="unselect">
        <div class="title">所有分组</div>
        <div class="btn-group">
          <el-button size="small" @click="showEdit(-1)">新增分组</el-button>
        </div>
      </div>
    </ToolBar>
    <el-table
        :data="deptList"
        :row-style="{cursor:'pointer'}"
        @selection-change="handleSelectionChange"
        @row-click="rowClick"
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="name"
          label="分组名称">
      </el-table-column>
      <el-table-column
          prop="gmtCreate"
          label="添加时间">
      </el-table-column>
      <el-table-column
          prop="gmtModified"
          label="修改时间">
      </el-table-column>
      <el-table-column
          prop="peopleCount"
          label="人数">
      </el-table-column>
    </el-table>
    <el-dialog :modal-append-to-body="false" title="编辑" @close="hideEdit" :visible="editRow!=null">
      <Edit ref="editBox" @submit="saveDept"></Edit>
    </el-dialog>
  </div>
</template>

<script>

import {getDeptList,updateDept,deleteDept,createDept} from "@/api/auth/dept";
import {getRelativeTime} from "@/libs/tools";
import ToolBar from '@/components/common/tool-bar'
import Edit from './components/edit-dept'
import {deleteById} from "@/api/knowledge";

export default {
  name: "dept",
  components: {
    ToolBar,
    Edit
  },
  data(){
    return {
      deptList:[],
      multiSelection:[],
      editRow: null
    }
  },
  created() {
    this.loadData()
  },methods: {
    handleSelectionChange(val) {
      this.multiSelection = val
    },
    loadData(){
      getDeptList().then(res => {
        if(res.code == 200) {
          this.deptList = res.data
        }
      })
    },
    saveDept(form) {
      if(form.id) {
        updateDept(form.id,form.name).then(res => {
          if(res.code == 200) {
            this.editRow.name = form.name
            this.editRow = null
            this.$message.success('成功修改部门')
          }
        })
      }else {
        createDept(form.name).then(res => {
          if(res.code == 200) {
            this.deptList.push(res.data)
            this.editRow = null
            this.$message.success('成功添加部门')
          }
        })
      }
    },
    hideEdit() {
      this.editRow = null
      this.$refs.editBox.reset()
    },
    showEdit(row) {
      this.editRow = row
    },
    rowClick(row,column,e) {
      this.showEdit(row)
      this.$nextTick(function () {
        this.$refs.editBox.loadData({id:row.deptId,name:row.name})
      })
    },
    batchDelete() {
      this.$confirm('是否删除'+this.multiSelection.length+'个分组?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let deptIds = []
        this.multiSelection.forEach(function (item) {
          deptIds.push(item.deptId)
        })
        deleteDept(deptIds).then(res => {
          if(res.code == 200) {
            this.$message.success('成功批量删除')
            this.loadData()
          }
        })
      }).catch(()=>{

      });
    }
  }
}
</script>

<style scoped lang="less">
.unselect {
  display: flex;
  align-items: center;
  .title {
    flex: 1;
    color: #606266;
    font-size: 14px;
  }
  .btn-group {
    display: flex;
    align-items: center;
  }
}
</style>

